<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--忽略页面中的邮箱格式为邮箱-->
    <meta name="format-detection" content="email=no">
    <!--<meta name="viewport"-->
    <!--content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">-->
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="format-detection" content="telephone=no,address=no,email=no">
    <title>日签海报</title>
    <link rel="stylesheet" href="../res/css/swipercss/swiper.min.css">
    <link rel="stylesheet" href="../res/css/base_X.css">
    <link rel="stylesheet" href="../res/daySignPosters-v1/css/daySignPosters.css">
</head>
<body style="font-family: myFont;" class="iphonex">
<div class="warp">
    <div class="preview_list">
        <div class="swiper-container preview_swiper myswiper">
            <div class="swiper-wrapper add_slide">
                <!--当前 样式-->
                <div class="swiper-slide abcde" id="jintian" data-flag="1">
                    <p class="date_text date_num date_text"></p>
                    <div class="scroll_div">
                        <img src="../res/images/poster/poster1.png" alt="宣品缩略图" class="scroll_img">
                    </div>
                </div>
                <!--后一天 样式-->
                <div class="swiper-slide abcde" id="mingtian" data-flag="2">
                    <p class="date_text">- 2018/8/<span class="curspan">31</span> 日签 -</p>
                    <div class="scroll_div vague_div">
                        <img src="../res/images/poster/poster2.png" alt="宣品缩略图" class="scroll_img ">
                        <div class="scroll_share">
                            <img src="../res/daySignPosters-v1/images/lockingicon.png" alt="" class="lockingicon">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a href="javascript:void (0);" class="scroll_btn show_btn" style="display: none">保存图片</a>
        <div class="current_day show_btn clearfix jintian">
            <div class="day_text clearfix">
                <img src="../res/daySignPosters-v1/images/switchicon.png" alt="" class="fl switchicon ">
                <div class="fl day_p">
                    <p class="switch_p">换一张</p>
                    <p class="switch_sele">每天4种心情,任你选</p>
                </div>
            </div>
            <a href="javascript:void (0);" class="day_btn fr">生成海报</a>
        </div>
        <p class="scroll_p nex_day show_btn mingtian" style="display: none">明天的心情,别忘了明天来开启哦～</p>
    </div>

</div>
</body>
<div id="old" style="display: none">
    <!--已过去 样式-->
    <!--已过去 样式-->
    <div class="swiper-slide abcde" data-flag="0">
        <p class="date_text">- <span class="curspan">2018/8/22</span> 日签 -</p>
        <div class="scroll_div">
            <img src="../res/images/poster/yearpo_3.png" alt="宣品缩略图" class="scroll_img ">
        </div>
        <!--<a href="javascript:void (0);" class="scroll_btn show_btn">保存图片</a>-->
    </div>
</div>
<script src="../res/js/jquery-1.11.1.min.js"></script>
<script src="../res/daySignPosters-v1/js/ObtainCurTime.js"></script>

<script src="../res/js/resize.js"></script>
<script src="../res/js/swiperjs/swiper.min.js"></script>
<script>
    //设置默认当前显示的值
    var currentShow = -1;
    var mySwiper;
    //获取当天的时间索引
    var curImdex = $(".date_num").parent().index();
    //默认现实当天的
    var initialSlide = curImdex;
    // var lastSlide = $(".swiper-slide").last();
    mySwiper = new Swiper(".swiper-container", {
        slidesPerView: "auto",
        centeredSlides: !0,
        watchSlidesProgress: !0,
        pagination: ".swiper-pagination",
        paginationClickable: !0,
        spaceBetween: 33,
        preloadImages: false,
        // initialSlide: initialSlide,
//         observer: true,
//         observeParents: true,
        onProgress: function (a) {
            var b, c, d;
            for (b = 0; b < a.slides.length; b++) c = a.slides[b], d = c.progress, scale = 1 - Math.min(Math.abs(.2 * d), 1), es = c.style,
                es.opacity = 1 - Math.min(Math.abs(d / 1.5), 1),
                es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = "translate3d(0px,0," + -Math.abs(70 * d) + "px)"
        },
        onSetTransition: function (a, b) {
            console.log(b)
            for (var c = 0; c < a.slides.length; c++) es = a.slides[c].style, es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = b + "ms"
            if (0 == b) {
                qiehuan(a.activeIndex);
            }

        },
        // onSlideChangeEnd: function (swiper) {
        //     if(swiper.swipeDirection=='prev') {
        //         mySwiper.prependSlide(addSlide());
        //     }
        //
        // }
    });
    // mySwiper.update();

    $(function () {
        var old = $("#old");
        if (old.find(".swiper-slide").size()) {
            mySwiper.prependSlide(old.html());

        }
    })


    function qiehuan(index) {
        console.log(index);
        if (currentShow == index) {
            return;
        }

        var obj = $($(".abcde").get(index));
        currentShow = index;

        $(".showDiv").hide();
        $(".showDiv").removeClass("showDiv");

        if (1 == obj.data("flag")) {
            $(".current_day").show();
            $(".current_day").addClass("showDiv");
        } else if (2 == obj.data("flag")) {
            $(".nex_day").show();
            $(".nex_day").addClass("showDiv");
        } else if (0 == obj.data("flag")) {
            $(".scroll_btn").show();
            $(".scroll_btn").addClass("showDiv");
        }

        //判断是否添加
        if (index <= 1) {
            addSlide();
        }
    }

    function addSlide() {
        var str = "";
        var str = "<div class=\"swiper-slide abcde\" data-flag='0'>"
        str += "<p class=\"date_text\">- 2018/8/21 日签11111 -</p>"
        str += "<div class=\"scroll_div\">"
        str += "<img src=\"../res/images/poster/poster2.png\" alt=\"宣品缩略图\" class=\"scroll_img \">"
        str += "</div>"
        str += "</div>"
        return str;
    }

</script>
</html>

